<script setup>
  import { ref, reactive } from "vue"
  import { useRouter } from "vue-router"
  import { User, Lock } from "@element-plus/icons-vue"
  import { ElMessage } from 'element-plus'

  const loginForm = ref()
  const router = useRouter()
  const formModel = ref({
    account: '',
    password: ''
  })
  const rules = reactive({
    account: [
      {required: true, message: '请输入管理员账号', trigger: 'blur'}
    ],
    password: [
      {required: true, message: '请输入管理员密码', trigger: 'blur'}
    ]
  })

  const doLogin = async () => {
    await loginForm.value.validate(valid => {
      if (valid) {
        ElMessage.success('登录成功')
        router.push('/dashboard')
      }
    })
  }
</script>

<template>
  <div class="container">
    <div class="title">云商大管家</div>
    <el-form ref="loginForm" :model="formModel" :rules="rules">
      <el-form-item prop="account">
        <el-input class="item-input" v-model.trim="formModel.account" placeholder="请输入管理员账号">
          <template #prepend>
            <el-button :icon="User" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input class="item-input" v-model.trim="formModel.password" placeholder="请输入管理员密码" type="password">
          <template #prepend>
            <el-button :icon="Lock" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="login-btn" @click="doLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $theme-color;
    height: 100vh;
    .item-input {
      width: 500px;
      height: 48px;
    }
    .login-btn {
      width: 500px;
      height: 48px;
    }
    .title {
      width: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      font-weight: 500;
      color: white;
      margin: {
        top: 260px;
        bottom: 30px;
      }
    }
  }
</style>